<template>
  <div class="mui-content mh-container pd bg-w">
    <mh-header headName="投票详情"> </mh-header>
    <div class="voting-inner">
      <div class="vot-form">
        <label>投票标题</label>
        <input type="text" placeholder="请输入投票标题" v-model="votTitle">
      </div>
      <div class="vot-form">
        <label>投票选项</label>
        <input type="text" v-for="(item,index) in votChoice" :value="index + 1 + '.' +item.value">
      </div>
      <div class="vot-form">
        <label>起止时间</label>
        <input type="text" placeholder="请选择投票开始时间" :value="startTime + '-' + endTime" readonly>
      </div>
    </div>

    <div class="btn-row mh-pd">
      <button type="button" class="mui-btn-block mh-btn">使用发布</button>
    </div>
  </div>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  export default {
    name: "custom-vot-detail",
    data () {
      return {
        votTitle: '请选出你最喜欢的游戏环节',
        votChoice: [
          {
            index: 1,
            value: '拔河'
          },
          {
            index: 2,
            value: '狼人杀'
          },
          {
            index: 3,
            value: '寻找宝藏'
          }
        ],
        startTime: '2018.5.28 16:30',
        endTime: '2018.5.28 18:30',
      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .voting-inner {
    padding-left: 1.5rem;
  }
  .vot-form {
    padding-top: 1rem;
    input[type=text] {
      padding: 0;
      border-top: 0;
      border-left: 0;
      border-right: 0;
      border-radius: 0;
      border-color: #eee;
    }
  }

</style>
